<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue的一些演示</title>
  </head>
  <body>
    <script type="importmap">
      // 使用映射
      {
        "imports": {
          "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
        }
      }
    </script>


    <div id="app">
      vue3 CDN 的 导入映射表 (Import Maps) 演示：<br>
      person：{{person}}

    </div>

    <script  type="module">
      import { createApp, reactive } from 'vue'
      
      // 定义一个对象，要有 setup、props等属性
      const app = {
        setup(props) {
          const person = reactive({
            name: 'composition API演示'
          })

          return {
            person
          }
        }
      }

      // 创建 Vue 的一个应用
      createApp(app)
        .mount('#app') // 指定渲染的位置
    </script>
  </body>
</html>